<!-- 支付密码弹窗 -->
<template>
	<view>
		<tui-keyboard :show="show" @close="closeKeyboard" radius @click="keyboardClick">
			<view class="keyword-box ss-flex-col">
				<view class="content">
					<view class="tips text-c-c">请输入支付密码</view>
					<view class="account ss-flex-row text-c-c ss-m-t-40">
						<view class="money">¥</view>
						<view class="amount">{{amount}}</view>
					</view>
				</view>
				<tui-keyboard-input :inputvalue="state.pwdArr"></tui-keyboard-input>
			</view>
		</tui-keyboard>
	</view>
</template>

<script setup>
	import sheep from "@/sheep"
	import {
		ref,
		unref,
		reactive,
		computed,
		onMounted,
		nextTick
	} from 'vue';
	
	import {
		onUnload
	} from '@dcloudio/uni-app';

	import {
		showPayPasswordModal,
		closePayPasswordModal
	} from '@/sheep/hooks/useModal';
	import tuiKeyboard from './tui-keyboard/tui-keyboard.vue';
	import tuiKeyboardInput from './tui-keyboard-input/tui-keyboard-input.vue';
	
	const show = computed(() => sheep.$store('modal').pay);
	
	const props = defineProps({
		amount: {
			type: [Number,String],
			default: 0,
		}
	});

	const state = reactive({
		numberArr: [],
		pwdArr: ["", "", "", "", "", ""], //密码数组
		temp: ["", "", "", "", "", ""], //临时数组
	})

	const emits = defineEmits(['passwordSuccess']);

	//关闭监盘
	function closeKeyboard() {
		closePayPasswordModal();
		nextTick(()=>{
			clearData();
		})
	}
	
	function clearData(){
		state.pwdArr = ["", "", "", "", "", ""]
		state.temp = ["", "", "", "", "", ""]
		state.numberArr = [];
	}

	//键盘点击时
	function keyboardClick(e) {

		let numberArr = state.numberArr;
		let pwdArr = state.pwdArr;
		let index = e.index;
		if (numberArr.length === pwdArr.length || index == undefined) {
			return;
		}
		if (index == 9) { //取消键
			closeKeyboard();
			return;
		} else if (index == 11) {
			//退格键
			let len = numberArr.length;
			if (len) {
				pwdArr.splice(len - 1, 1, "");
			} else {
				pwdArr = state.temp;
			}
			numberArr.pop();
		} else if (index == 10) {
			numberArr.push(0);
			pwdArr.splice(numberArr.length - 1, 1, "●");
		} else {

			numberArr.push(index + 1);
			pwdArr.splice(numberArr.length - 1, 1, "●");
		}
		state.numberArr = numberArr;
		state.pwdArr = pwdArr;
		getPwd();
	}

	
	//判断并取出密码
	async function getPwd() {

		if (state.numberArr.length === state.pwdArr.length) {

			let pwd = state.numberArr.join('');

			const res = await sheep.$api.user.checkPayPassword({
				pay_password: pwd
			});

			if (res.error == 0) {
				closePayPasswordModal();
				nextTick(()=>{
					clearData();
				})
				emits('passwordSuccess');
				return;
			} else {
				closePayPasswordModal();
				
				nextTick(()=>{
					clearData();
				})
				
				uni.showModal({
					content: '支付密码错误请重试',
					showCancel: true,
					cancelText: '忘记密码',
					confirmText: '重试',
					success: function(res) {
						if (res.confirm) {
							showPayPasswordModal();
						} else if (res.cancel) {
							sheep.$router.go('/pages/user/account'); 
						}
					}
				})
			}
		}
	}
	
	onUnload(()=>{
		closePayPasswordModal();
	})
	
</script>

<style lang="scss" scoped>
	.keyword-box {
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background: #FFFFFF;

		.tips {
			margin-top: 44rpx;
			height: 52rpx;
			font-family: Source Han Sans;
			font-size: 36rpx;
			font-weight: bold;
			line-height: normal;
			letter-spacing: normal;
			color: #171717;
		}

		.money {
			margin-right: 6rpx;
			height: 52rpx;
			font-family: Source Han Sans;
			font-size: 36rpx;
			font-weight: bold;
			line-height: normal;
			letter-spacing: normal;
			color: #171717;
		}

		.amount {
			height: 93rpx;
			font-family: Source Han Sans;
			font-size: 64rpx;
			font-weight: bold;
			line-height: normal;
			letter-spacing: normal;
			color: #171717;
		}
	}

	.text-c-c {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>